<template>
  <div class="Cart">
    <van-nav-bar title="购物车" left-arrow @click-left='back' fixed>
      <template #right>
        <span @click="changeButton">编辑</span>
        <van-icon name="chat-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="noGoods" v-if="flag">
      <div class="empty">
        <img src="https://s10.mogucdn.com/mlcdn/c45406/180704_3ac3b297lghla2jjdhe23d5jfgddf_1500x1170.png" alt="">
        <p>你的购物车空空如也</p>
        <van-button type="info" color="#ff5777" size="small" to="/home">去逛逛</van-button>
      </div>
    </div>
    <!-- 商品栏 -->
    <div class="Goods" v-else>
      <ul ref="isSelect">
        <li v-for="item in datalist" :key="item.gc_id">
          <div class="dot">
            <!-- <input type="checkbox" @click="isTrue(index)"> -->
            <!-- <van-icon class="select" name="passed" v-show="isSelect" /> -->
            <input type="checkbox" class="noselect" v-model="isSelect" :value="item" @change="selectAll" />
          </div>
          <div class="img">
            <img :src="item.gc_img" alt="">
          </div>
          <div class="wenzi">
            <p class="p1">{{item.gc_name}}</p>
            <p class="p2">颜色:<span>白色</span>尺码:<span>L</span></p>
            <p class="p3">售价:<span>{{item.gc_price}}</span></p>
            <van-stepper v-model="item.num" integer value="item" />
          </div>
        </li>
      </ul>
      <!-- 下边栏 -->
      <div class="footer">
        <!-- 结算 -->
        <van-submit-bar :price="getSum()" button-text="结算" @submit="onSubmit" v-if="buttonFlag">
          <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
          <!-- <template #tip>
          你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
        </template> -->
        </van-submit-bar>
        <!-- 删除 -->
        <van-submit-bar button-text="删除" @submit="onDelete" v-else>
          <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
          <!-- <template #tip>
          你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
        </template> -->
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data: () => ({
      buttonFlag: true,
      isSelect: [],
      // ischange: [],
      flag: false,
      checked: false,
      datalist: [
      ]
    }),
    created() {
      this.GetShopingCart(JSON.parse(localStorage.getItem('userinfo')).u_id)

    },
    mounted() {

    },

    methods: {
      getSum() {
        let sum = 0

        for (var i in this.isSelect) {
          sum += this.isSelect[i].gc_price * this.isSelect[i].num

        }
        return sum * 100
      },
      selectAll() {
        if (this.isSelect.length === this.datalist.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      all() {
        if (this.checked === true) {
          this.isSelect = this.datalist
        } else {
          this.isSelect = []
        }
      },
      onSubmit() {
      
        if (this.isSelect.length === 0) {
          return this.$Toast('请选择你要结算的商品')
        } else {
          let prams=null
          for (var i = 0; i < this.isSelect.length; i++) {
             prams={
              money:this.datalist[i].num*this.datalist[i].gc_price,
              id:this.datalist[i].gc_id
            }
            this.updataShopingCart(prams)
          }
        }
        this.GetShopingCart(localStorage.getItem('userId'))
      },
      onDelete() {
        if (this.isSelect.length === 0) {
          return this.$Toast('请选择你要删除的商品')
        } else {
          for (var i = 0; i < this.isSelect.length; i++) {
            this.deleteShopingCart(this.isSelect[i].gc_id)
          }
        }
        this.GetShopingCart(JSON.parse(localStorage.getItem('userinfo')).u_id)
      },
      changeButton() {
        if (this.datalist.length >= 1) {
          this.buttonFlag = !this.buttonFlag
        } else {
          return false
        }
      },
      back() {
        window.history.back()
      },
      async GetShopingCart(id) {
        try {
          const data = await this.$Api.apiCart.GetShopingCart(id)
          const res = data.data
          if (typeof res && !isNaN(res.length)) {
            this.datalist = res
            this.flag = false
          } else {
            this.datalist = []
            this.flag = true
          }
        } catch (error) {
          // console.log(error)
          console.log(error)
        }
      },
      async deleteShopingCart(id) {
        try {
          const res = await this.$Api.apiCart.deleteShopingCart(id)
          if(res.data.status==200)this.$Toast('删除成功')

        } catch (error) {
          // console.log(error)
          console.log(error)
        }
      },
      async updataShopingCart(prams){
        try {
          const res = await this.$Api.apiCart.updataShopingCart(prams)
          if(res.data.status==200)this.$Toast('购买成功')

        } catch (error) {
          // console.log(error)
          console.log(error)
          this.$Toast('购买失败')
        }
      }
    }
  }

</script>
<style lang="less">
  .van-submit-bar__bar {
    justify-content: space-between;
  }

  .Cart {
    height: 100%;

    .van-nav-bar .van-icon {
      color: #c2c2c2;
      z-index: 1000;
    }

    .van-nav-bar .van-nav-bar__title {
      font-size: 18px;
      color: #5e5e5e;
    }

    .noGoods {
      background: #f6f6f6;
    }

    span {
      color: #727272;
      margin-right: 6px;
    }

    .empty {
      background: white;
      font-size: 12px;
      color: #575757;
      text-align: center;
      margin: 0;
      width: 100%;
      height: 300px;

      img {
        width: 100%;
        height: 290px;
        margin-top: -1rem
      }

      p {
        margin-top: -3rem;
      }
    }

    .empty .van-button__content span {
      color: white;
      padding: 0 10px;
    }
  }

  // 商品栏
  .Goods {
    height: 100%;
    background: rgb(239, 239, 239);

    ul {
      padding: 12px;
      padding-top: 36px;
      padding-bottom: 50px;
      background: rgb(239, 239, 239);

      li {
        position: relative;
        display: flex;
        width: 99%;
        background: white;
        border-radius: 8px;
        height: 150px;
        box-sizing: border-box;
        padding: 5%;
        margin-top: 20px;

        .dot {
          padding: 14% 0 0 0;
        }

        .noselect {
          font-size: 24px;
          color: #c8c9cc;
        }

        .select {
          font-size: 24px;
          color: #ff4466;
        }

        .img {
          width: 110px;
          height: 90px;
          margin: 5% 2% 0 5%;
          float: left;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .wenzi {
          .p1 {
            /* font-weight: bold; */
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .p2 {
            color: #ccc;

            span {
              color: #666;
            }
          }

          .p3 {
            color: #f46;

            span {
              color: #f46;
            }
          }

          .van-stepper {
            position: absolute;
            right: 10%;
            bottom: 10%;

            .van-stepper__minus {
              border-radius: 50% 0 0 50%;
            }

            .van-stepper__plus {
              border-radius: 0 50% 50% 0;
            }

            .van-stepper__input {
              margin: 0;
            }
          }
        }
      }
    }
  }

  // 下边栏
  /deep/ .van-submit-bar__button--danger {
    background: #ff5777 !important;

    .van-button__text {
      color: #fff;
    }
  }

</style>
